<div class="page-components">
    <!-- 整个放大镜区域 -->
    <div class="box">
        <!-- 显示区域 -->
        <div class="show">
            <!-- 图片 -->
            <img>
            <div class="mask"></div>
        </div>
        <!-- 小图片的 列表项 -->
        <ul class="list">
            <!-- <li class="active"><img src="./images/1.small.jpg" alt=""></li>
        <li><img src="./images/2.small.jpg" alt=""></li>
        <li><img src="./images/3.small.jpg" alt=""></li> -->
        </ul>
        <!-- 放大镜区域 -->
        <div class="glass"></div>
    </div>
    <div class="babel">
        <div class="page-components-babel">
            <div class="page-price">
                <div class="page-price-title"><span>易干 短袖POLO衫</span></div>
                <div class="page-price-display"><span class="page-price-display-title">价格</span><span
                        class="DisplayPrice">￥ <span class="display-price-value highlight"><span>208</span></span><span
                            class="display-price-original">
                            <!---->
                        </span></span></div>
            </div>
            <div class="page-coupon-activities">
                <div class="page-coupons">
                    <!---->
                    <div class="page-coupons-more" style="display: none;"></div>
                </div>
                <!---->
            </div>
            <div class="page-specs">
                <div class="page-specs-row">
                    <div class="page-specs-title">尺码</div>
                    <div class="page-specs-items"><a href="javascript:void(0);" class="page-specs-item">男式 XS</a><a
                            href="javascript:void(0);" class="page-specs-item">男式 S</a><a href="javascript:void(0);"
                            class="page-specs-item">男式 M</a><a href="javascript:void(0);" class="page-specs-item">男式
                            L</a><a href="javascript:void(0);" class="page-specs-item">男式 XL</a><a
                            href="javascript:void(0);" class="page-specs-item">男式 XXL</a></div>
                </div>
                <div class="page-specs-row">
                    <div class="page-specs-title">颜色</div>
                    <div class="page-specs-items"><a href="javascript:void(0);" class="page-specs-item">银灰色</a><a
                            href="javascript:void(0);" class="page-specs-item">黑色</a><a href="javascript:void(0);"
                            class="page-specs-item">蓝色</a><a href="javascript:void(0);" class="page-specs-item">深海军蓝</a>
                    </div>
                </div>
            </div>
            <div class="page-delivery-num-all">
                <div class="page-delivery-wrapper">
                    <div class="page-delivery-type"><span class="page-delivery-title">配送方式</span><a
                            href="javascript:void(0);" active="true" class="page-delivery-item">&nbsp快递寄送&nbsp </a>
                        <!---->
                    </div>
                    <div class="page-delivery-fare" style="display: none;"><span
                            class="page-delivery-fare-title">选择店铺</span><a href="javascript:void(0);"
                            class="page-delivery-salesrooms"><span class="DisplayShop">请选择门店</span></a></div>
                    <!---->
                    <!---->
                    <!---->
                </div>
                <div class="page-delivery-num"><span class="page-delivery-num-title">数量</span>
                    <div class="FormQuantity">
                        <div class="form-quantity-wrap"><a href="javascript:void(0);" class="disabled">−</a><input
                                type="number" class=""><a href="javascript:void(0);" class="">+</a></div>
                    </div><span class="page-delivery-num-unit">件</span>
                    <!---->
                    <!---->
                </div>
            </div>
            <div class="page-buy-btn">
                <div class="page-buy-btn-wrap"><a href="./Sign_in.html" target="_blank" class="page-to-buy">立即购买</a><a
                        href="javascript:void(0);" class="page-to-cart">加入购物车</a></div>
            </div>
        </div>
    </div>


</div>

<div class="glass-bottom">
    <div class="view-bottom-left">
        <div class="part-recommends-top">
            <div class="part-recommends-title">推荐商品</div>
        </div>
        <div id="part-recommends-list"> </div>

    </div>

    <div class="view-bottom-right">
        <div class="part-detail">
            <div class="part-properties">
                <div class="part-properties-top">
                    <div class="part-properties-title">产品参数</div>
                </div>
                <div class="properties-list">
                    <div class="properties-list-item"><span class="properties-list-item-label">性别：</span><span
                            class="properties-list-item-value">Men</span></div>
                    <div class="properties-list-item"><span class="properties-list-item-label">货号：</span><span
                            class="properties-list-item-value">4550344430323</span></div>
                    <div class="properties-list-item"><span class="properties-list-item-label">品番：</span><span
                            class="properties-list-item-value">ABE05A1S</span></div>
                    <div class="properties-list-item"><span class="properties-list-item-label">季节：</span><span
                            class="properties-list-item-value">夏</span></div>
                    <!---->
                    <!---->
                    <!---->
                </div>
            </div>
        </div>
        <div class="page-details">
            <div class="part-detail-page-top">详情</div>
            <div class="part-detail-remind-title"><strong>消费提醒：</strong>※因商品批次不同，颜色表述略有不同：深海军蓝/深藏青色为同一颜色,海军蓝/藏青色为同一颜色。
            </div>
            <div class="page-details-title">易干 短袖POLO衫</div>
            <div class="page-details-spec">采用易干的面料制作而成的，触感干爽舒适的POLO衫。方便清洗打理。</div>
            <!---->
            <!---->
            <div class="page-details-info-title">基本信息</div>
            <!---->
            <div class="page-details-material">尺<span style="display: inline-block; width: 2em;"></span>码：男式 XS/男式 S/男式
                M/男式 L/男式 XL/男式 XXL</div>
            <div class="page-details-material">颜<span style="display: inline-block; width: 2em;"></span>色：银灰色/黑色/蓝色/深海军蓝
            </div>
            <!---->
            <div class="part-detail-page-images">
                <div class="part-detail-page-image"><img
                        src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms434752/ae0477c3-5102-46df-8e74-34182c31a5a8.jpg"
                        alt="细节展示图"></div>
                <div class="part-detail-page-image"><img
                        src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms434752/aa3e1f69-b9db-4b4d-a6ac-84664ede1a77.jpg"
                        alt="细节展示图"></div>
                <div class="part-detail-page-image"><img
                        src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms434752/75e09df8-ca31-4ed9-834d-7a0581b74aad.jpg"
                        alt="细节展示图"></div>
                <div class="part-detail-page-image"><img
                        src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms434752/51a50a76-c714-4317-b448-131d4d1fb9db.jpg"
                        alt="细节展示图"></div>
            </div>
            <div class="page-details-info-title">尺码对照 | Size</div>
            <div class="specs">
                <table>
                    <thead>
                        <tr>
                            <th>尺码</th>
                            <th>下围宽</th>
                            <th>下摆围</th>
                            <th>肩宽</th>
                            <th>胸围</th>
                            <th>胸宽</th>
                            <th>腰围</th>
                            <th>衣宽</th>
                            <th>衣长</th>
                            <th>袖长</th>
                            <th>袖长（领中央至袖口长度）</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>男式 L</th>
                            <td>52.0cm</td>
                            <td>104.0cm</td>
                            <td>46.0cm</td>
                            <td>106.0cm</td>
                            <td>53.0cm</td>
                            <td>101.0cm</td>
                            <td>50.5cm</td>
                            <td>70.0cm</td>
                            <td>22.5cm</td>
                            <td>45.5cm</td>
                        </tr>
                        <tr>
                            <th>男式 M</th>
                            <td>50.0cm</td>
                            <td>100.00</td>
                            <td>44.0cm</td>
                            <td>102.0cm</td>
                            <td>51.0cm</td>
                            <td>97.0cm</td>
                            <td>48.5cm</td>
                            <td>68.0cm</td>
                            <td>22.5cm</td>
                            <td>44.5cm</td>
                        </tr>
                        <tr>
                            <th>男式 S</th>
                            <td>48.0cm</td>
                            <td>96.0cm</td>
                            <td>42.0cm</td>
                            <td>98.0cm</td>
                            <td>49.0cm</td>
                            <td>93.0cm</td>
                            <td>46.5cm</td>
                            <td>66.0cm</td>
                            <td>21.5cm</td>
                            <td>42.5cm</td>
                        </tr>
                        <tr>
                            <th>男式 XL</th>
                            <td>56.0cm</td>
                            <td>112.0cm</td>
                            <td>48.0cm</td>
                            <td>114.0cm</td>
                            <td>57.0cm</td>
                            <td>109.0cm</td>
                            <td>54.5cm</td>
                            <td>73.0cm</td>
                            <td>23.5cm</td>
                            <td>47.5cm</td>
                        </tr>
                        <tr>
                            <th>男式 XS</th>
                            <td>46.0cm</td>
                            <td>92.0cm</td>
                            <td>40.0cm</td>
                            <td>94.0cm</td>
                            <td>47.0cm</td>
                            <td>89.0cm</td>
                            <td>44.5cm</td>
                            <td>66.0cm</td>
                            <td>21.5cm</td>
                            <td>41.5cm</td>
                        </tr>
                        <tr>
                            <th>男式 XXL</th>
                            <td>60.0cm</td>
                            <td>120.0cm</td>
                            <td>50.0cm</td>
                            <td>122.0cm</td>
                            <td>61.0cm</td>
                            <td>117.0cm</td>
                            <td>58.5cm</td>
                            <td>75.0cm</td>
                            <td>23.5cm</td>
                            <td>48.5cm</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div>※商品尺寸由于手工测量会有2cm-4cm左右误差，请以收到的商品实物为准。</div>
            <div class="part-detail-page-images">
                <div class="part-detail-page-image"><img
                        src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms307/0b1692e7-ff80-468f-8c60-016f39916059.png"
                        alt="购物指南"><img
                        src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms307/51e60eb3-90a7-40b8-a037-f5dd0823b704.png"
                        alt="价格说明"></div>
            </div>
        </div>
    </div>

</div>
<script src="./javascripts/tool.js"></script>
<script src="./javascripts/glass.js"></script>
<script src="./javascripts/jQuery.js"></script>
<script>
    //  1,  模拟定义一个 数组 模拟 数据库 放大镜数据
    var arr = [
        { id: 1, large: '1.large.jpg', small: '1.small.jpg' },
        { id: 2, large: '2.large.jpg', small: '2.small.jpg' },
        { id: 3, large: '3.large.jpg', small: '3.small.jpg' },
        { id: 4, large: '4.large.jpg', small: '4.small.jpg' },
    ];

    // 2,   获取父级标签对象
    var oBox = document.querySelector('.box');

    // 3,   使用构造函数 生成 实例化对象
    //      参数1: 标签对象 参数2: 数组
    var glassObj = new SetGlass(oBox, arr);

    // 调用入口函数
    glassObj.init();

</script>
<script>
    (function () {
        $.ajax({
            url: "./json/goods.json",//向本地的json文件发送请求
            type: "GET",
            success: function (data) {
                var i;
                var things = "";//用一个变量来存储json中的数据
                for (i = 0; i < data.length - 4; i++) {
                    //用for循环遍历数组将数据存入html变量中
                    things += `<div class="list-inner">
                            <div class="pic"><img src="${data[i].pic}"></div>
                            <div class="pic-name">${data[i].name}</div>
                            
                            </div>`;
                }
                document.getElementById("part-recommends-list").innerHTML += things;
            },
            error: function () {
                console.log("不太彳亍");
            }
        })
    })();

</script>

<script>
    var goods_data = {
        "name": "易干 短袖POLO衫",
        "price": "208",
        "pic": "https://img.muji.com.cn/img/item/4550344430323_01_1260.jpg",
    }
    // 事件委托添加事件 :  
    $(".page-buy-btn-wrap").on("click", ".page-to-cart", function () {
        
        var str_jsonData = JSON.stringify(goods_data);
        
        localStorage.setItem('Data', str_jsonData);
        alert("加入购物车成功");
    });

</script>

    